<template>
  <div style="margin-bottom: 8px">
    <el-button type="primary" @click="newLink" :loading="newLinkBtnLoading">
      添加联系人
    </el-button>
    <el-button
      type="primary"
      @click="updateLink"
      :loading="updateLinkBtnLoading"
    >
      编辑联系人
    </el-button>
    <el-button type="danger" @click="deleteData"> 删除联系人 </el-button>
  </div>
  <AppPageTable
    stripe
    :data="tableData.data"
    :autostyle="'height: calc(100% - 36px)'"
    :option="tableData.option"
    @change="getTabelData()"
  >
    <el-table-column type="selection" width="50" />
    <el-table-column label="联系人编号" prop="linkCode" />
    <el-table-column label="姓名" prop="linkName" />
    <el-table-column label="主联系人" prop="isMain">
      <template #default="scope">
        {{ scope.row.isMain == 1 ? "是" : "否" }}
      </template>
    </el-table-column>
    <el-table-column label="业务员" prop="salesName" />
    <el-table-column label="性别" prop="sexes" >
      <template #default="scope">
        {{ scope.row.sexes == 0 ? "男" : "女" }}
      </template>
    </el-table-column>
    <el-table-column label="办公电话" prop="tel" />
    <el-table-column label="传真" prop="fax" />
    <el-table-column label="电子邮件" prop="email" />
    <el-table-column label="手机" prop="mobile" />
    <el-table-column label="部门" prop="departmentName" />
    <el-table-column label="职位" prop="positionName" />
    <el-table-column label="生日" prop="birthday">
      <template #default="scope">
        {{ parseDate(scope.row.birthday) }}
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="meo" />
  </AppPageTable>
  <el-dialog v-model="dialogData.show" :title="dialogData.title">
    <el-form
      :model="formData"
      :rules="formRules"
      label-suffix="："
      size="small"
      label-width="100px"
      ref="form"
    >
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="编号" prop="linkCode">
            <el-input v-model="formData.linkCode"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="linkName">
            <el-input v-model="formData.linkName"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属客户" prop="entCode">
            <el-input v-model="formData.entCode" disabled> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="客户名称" prop="entFullname">
            <el-input v-model="formData.entFullname" disabled> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="办公室电话" prop="tel">
            <el-input v-model="formData.tel"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="传真" prop="fax">
            <el-input v-model="formData.fax"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="formData.mobile"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="departmentName">
            <el-input v-model="formData.departmentName"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="职位" prop="positionName">
            <el-input v-model="formData.positionName"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sexes">
            <el-select v-model="formData.sexes">
              <el-option :value="0" label="男"></el-option>
              <el-option :value="1" label="女"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              type="date"
              v-model="formData.birthday"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="业务员" prop="salesId">
            <selectDown
              v-model:modelData="formData.salesId"
              placeholder="请输入后搜索"
              urlType="man"
              :option="ywyOption"
            >
            </selectDown>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="是否设定为主联系人"
            prop="isMain"
            label-width="150px"
          >
            <el-checkbox
              v-model="formData.isMain"
              :true-label="1"
              :false-label="0"
            >
            </el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="16">
          <el-form-item label="备注" prop="memo">
            <el-input v-model="formData.memo" type="textarea"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import selectDown from "./selectDown.vue";
import dayjs from "dayjs";
export default defineComponent({
  components: {
    AppPageTable,
    selectDown,
  },
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    let handleConfirmMobile = (rule, value, callback) => {
      const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if (value == "" || value == undefined || value == null) {
        callback();
      } else {
        if (!reg.test(value) && value != "") {
          callback(new Error("请输入正确的手机号码"));
        } else {
          callback();
        }
      }
    };
    let handleConfirmEmail = (rule, value, callback) => {
      const reg =
        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (value == "" || value == undefined || value == null) {
        callback();
      } else {
        if (!reg.test(value) && value != "") {
          callback(new Error("请输入正确的邮箱地址"));
        } else {
          callback();
        }
      }
    };
    let handleConfirmTel = (rule, value, callback) => {
      const reg = /0\d{2,3}-\d{7,8}/; //座机和传真格式是一样的：区号-号码
      if (value == "" || value == undefined || value == null) {
        callback();
      } else {
        if (!reg.test(value) && value != "") {
          callback(new Error("请输入正确的号码：区号-号码"));
        } else {
          callback();
        }
      }
    };
    return {
      tableData: {
        data: [],
        option: useTableOption(),
      },
      formData: {
        id: null,
        entId: null,
        linkCode: null,
        linkName: null,
        entCode: null,
        entFullname: null,
        salesId: null,
        sexes: null, //性别
        tel: null,
        fax: null,
        email: null,
        ccMail: null,
        mobile: null,
        departmentName: null,
        positionName: null,
        birthday: null,
        isMain: null,
        memo: null,
      },
      formRules: {
        linkCode: [
          {
            required: true,
            message: "请输入编号",
            trigger: "change",
          },
        ],
        mobile: [
          {
            validator: handleConfirmMobile,
            trigger: "blur",
          },
        ],
        tel: [
          {
            validator: handleConfirmTel,
            trigger: "blur",
          },
        ],
        fax: [
          {
            validator: handleConfirmTel,
            trigger: "blur",
          },
        ],
        email: [
          {
            validator: handleConfirmEmail,
            trigger: "blur",
          },
        ],
      },
      dialogData: {
        show: false,
        title: "",
        btnLoading: false,
      },
      newLinkBtnLoading: false,
      updateLinkBtnLoading: false,
      ywyOption: [],
    };
  },
  methods: {
    parseDate(date) {
      if(date){
        return dayjs(date).format("YYYY-MM-DD");
      }else{
        return ""
      }
      
    },
    initData() {
      this.tableData.option.page = 1;
      this.tableData.option.page = 10;
      this.getTabelData();
    },
    getTabelData() {
      this.tableData.option.loading = true;
      this.$http
        .get("/api/buenterpriselink/queryPage", {
          EntId: this.$route.query.entId,
          PageIndex: this.tableData.option.page,
          PageSize: this.tableData.option.pageSize,
        })
        .then((res) => {
          this.tableData.data = res.content;
          this.tableData.option.total = res.totalElements;
        })
        .finally(() => (this.tableData.option.loading = false));
    },
    newLink() {
      this.dialogData.title = "新增联系人";
      this.formData = {
        id: null,
        entId: this.$route.query.entId,
        linkCode: null,
        linkName: null,
        entCode: this.detailData.entCode,
        entFullname: this.detailData.entFullname,
        salesId: null,
        sexes: null,
        tel: null,
        fax: null,
        email: null,
        ccMail: null,
        mobile: null,
        departmentName: null,
        positionName: null,
        birthday: null,
        isMain: null,
        memo: null,
      };
      this.newLinkBtnLoading = true;
      this.$http.get("/api/buenterpriselink/getEntLinkCode").then((res) => {
        if (res.status) {
          this.formData.linkCode = res.data;
          this.newLinkBtnLoading = false;
          this.dialogData.show = true;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    updateLink() {
      if (this.tableData.option.selected.length == 1) {
        this.dialogData.title = "编辑联系人";
        this.formData = JSON.parse(
          JSON.stringify(this.tableData.option.selected[0])
        );
        this.formData.entCode = this.detailData.entCode;
        this.formData.entFullname = this.detailData.entFullname;
        if (this.tableData.option.selected[0].salesId) {
          this.updateLinkBtnLoading = true;
          this.$http
            .get("/api/user/query", {
              Id: this.tableData.option.selected[0].salesId,
            })
            .then((res) => {
              this.ywyOption = res.content.map((t) => {
                return {
                  id: t.id,
                  value: t.id,
                  label: t.username,
                  selectLabel: t.username,
                };
              });
              this.dialogData.show = true;
            })
            .finally(() => {
              this.updateLinkBtnLoading = false;
            });
        } else {
          this.dialogData.show = true;
        }
      } else {
        this.$message.warning("请选择一条数据");
      }
    },
    deleteData() {
      let deleteIndex = [];
      this.tableData.option.selected.forEach((t) => {
        deleteIndex.push(t.id);
      });
      this.$http
        .post("/api/buenterpriselink/delete", {
          idArray: deleteIndex,
        })
        .then((res) => {
          if (res.status) {
            this.$message.success(res.message);
            this.getTabelData();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    cancel() {
      this.dialogData.show = false;
    },
    submit() {
      let url = "";
      if (this.formData.id) {
        url = "/api/buenterpriselink/edit";
      } else {
        url = "/api/buenterpriselink/create";
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogData.btnLoading = true;
          this.$http
            .post(url, this.formData)
            .then((res) => {
              if (res.status) {
                this.$message.success(res.message);
                this.getTabelData();
                this.dialogData.show = false;
              } else {
                this.$message.error(res.message);
              }
            })
            .finally(() => (this.dialogData.btnLoading = false));
        }
      });
    },
  },
  watch: {
    "dialogData.show"(newVal) {
      if (!newVal) {
        this.formData = {
          id: null,
          entId: null,
          linkCode: null,
          linkName: null,
          entCode: null,
          entFullname: null,
          salesId: null,
          sexes: null,
          tel: null,
          fax: null,
          email: null,
          ccMail: null,
          mobile: null,
          departmentName: null,
          positionName: null,
          birthday: null,
          isMain: 0,
          memo: null,
        };
        this.$nextTick(() => {
          this.$refs.form.resetFields();
        });
      }
    },
  },
  mounted() {
    this.getTabelData();
  },
});
</script>

<style lang="scss" scoped></style>
